<template>
    <div class="vue-collapse">
        <div class="collapse-top" @click="isShow = !isShow">
            <div class="collapse-top-title">
                <p class="collapse-top-title__main"><slot name="title">{{ title }}</slot></p>
                <p class="collapse-top-title__sub" v-if="subTitle"><slot name="subTitle">{{ subTitle }}</slot></p>
            </div>
            <div class="collapse-btn">
                <span>
                    <span>{{ isShow ? '收起' : '展开' }}</span>
                    <i class="icon" :class="{'el-icon-caret-top': isShow, 'el-icon-caret-bottom': !isShow}"></i>
                </span>
            </div>
        </div>
        <el-collapse-transition>
            <div v-if="isShow">
                <div class="collapse-content">
                    <slot></slot>
                </div>
            </div>
        </el-collapse-transition>
    </div>
</template>

<script>
export default {
    name: 'VueCollapse', // 自定义折叠面板 julei
    props: {
        title: { // 标题
            default: '',
        },
        subTitle: { // 副标题
            default: ''
        },
        show: { // 是否默认展开
            type: Boolean,
            default: false,
        }
    },
    components: {},
    data() {
        return {
            isShow: false,
        }
    },
    watch: {
        show: {
            handler: function(val) {
                this.isShow = val;
            },
            immediate: true
        }
    }
}
</script>

<style lang="scss" scoped>
.vue-collapse {
    .collapse-top {
        cursor: pointer;
        display: flex;
        align-items: flex-start;
        border-bottom: 1px solid #eaeff1;
        padding: 10px;
        .collapse-top-title {
            flex: 1;
            padding-right: 30px;
            .collapse-top-title__main {
                font-size: 14px;
                font-weight: 600;
            }
            .collapse-top-title__sub {
                color: #999;
                padding-top: 5px;
            }
        }
        .collapse-btn {
            font-size: 12px;
            cursor: pointer;
            width: 50px;
            color: #999;
        }
    }
    .collapse-content {
        padding: 10px 10px 0;
        border-bottom: 1px solid #eaeff1;
    }
}
</style>
